<template>
  <div class="life-detail common-mobile-view">
    <span class="title">{{ foodStore.currentFoodRecipe.name }}</span>

    <section>
      <div class="info-container">
        <food-basic-data/>

        <food-material-data/>

        <food-step-data/>

        <food-others-data/>
      </div>

      <div class="record-container card-item">
        <food-record-data/>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { useFoodStore } from '@/store/food.ts'
import { useAppStore } from '@/store/app.ts'
import { useRoute } from 'vue-router'
import FoodBasicData from '@/components/Food/Data/FoodBasicData.vue'
import FoodMaterialData from '@/components/Food/Data/FoodMaterialData.vue'
import FoodStepData from '@/components/Food/Data/FoodStepData.vue'
import FoodOthersData from '@/components/Food/Data/FoodOthersData.vue'
import FoodRecordData from '@/components/Food/Data/FoodRecordData.vue'
import { onMounted } from 'vue'

const foodStore = useFoodStore()
const appStore = useAppStore()
const route = useRoute()

onMounted(() => {
  appStore.isShowMobileBack = true
  foodStore.queryFoodRecipe(route.params.id as number)
})
</script>

<style lang="scss">
@use "@/styles/home/life.detail.module";
</style>
